<template>
  <view class="file-diff">
    <view class="section-title">实际文件比较</view>

    <view class="note">
      <text>本实例展示了PlatformTransformer在实际文件上的转换效果：</text>
      <text>1. 源文件：src/utils/platformUtils.ts</text>
      <text>2. 编译后：真实构建产物中的PlatformChain代码已被替换</text>
      <text>3. 不同平台编译后的代码会有显著差异</text>
    </view>

    <view class="example">
      <view class="example-title">使用示例</view>
      <view class="test-button" :style="buttonStyle" @click="handleShare">测试平台按钮 ({{ platformTitle }})</view>
    </view>

    <view class="explanation">
      <text>👆 上面的按钮样式和行为根据当前平台自动适配</text>
      <text>💡 编译后的打包文件中只包含当前平台的代码，其他平台的代码完全被移除</text>
      <text>📦 这样可以显著减小应用体积，提高性能</text>
    </view>
  </view>
</template>

<script>
import { getPlatformButtonStyle, getPlatformTitle, shareToPlatform } from '../utils/platformUtils';

export default {
  name: 'FileDiff',
  data() {
    return {
      buttonStyle: getPlatformButtonStyle(),
      platformTitle: getPlatformTitle()
    };
  },
  methods: {
    handleShare() {
      shareToPlatform(
        `${this.platformTitle}分享测试`,
        '这是来自PlatformTransformer测试的分享',
        '/static/logo.png'
      );
    }
  }
};
</script>

<style scoped>
.file-diff {
  padding: 30rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  margin: 40rpx 0;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
  text-align: center;
}

.note {
  margin: 20rpx 0;
  padding: 20rpx;
  background: #f2f6fc;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #606266;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.example {
  margin: 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.example-title {
  font-size: 28rpx;
  color: #606266;
  margin-bottom: 20rpx;
}

.test-button {
  padding: 0 20rpx;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explanation {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  font-size: 28rpx;
  color: #409eff;
}
</style>
